let window_width = 1024
let window_height = 768
let RADIUS = 8 // 小圆半径
let margin_top = 60 // 每个数字距离顶部的上边距
let margin_left = 30 // 第一个数字左边距

const endTime = new Date(2018, 11, 13, 10, 30, 10)

let showTimeSecconds = 0

window.onload = function () {
    let canvas = document.getElementById('canvas')
    let context = canvas.getContext('2d');
    
    canvas.width = window_width
    canvas.height = window_height

    showTimeSecconds = getShowTimeSecconds()
    console.log(showTimeSecconds)
    render(context)
}

function render (cxt) {

    // let hours = parseInt( showTimeSecconds/3600 )
    // let minutes = parseInt( (showTimeSecconds - hours * 3600)/60 )
    // let seconds = showTimeSecconds%60
    let hours = parseInt( showTimeSecconds/3600 )
    console.log(hours)
    let minutes = 34
    let seconds = 56

    // 小时
    renderDigit(margin_left + 0*(RADIUS + 1), margin_top, parseInt(hours/10), cxt)
    renderDigit(margin_left + 15*(RADIUS + 1), margin_top, parseInt(hours%10), cxt)

    renderDigit(margin_left + 30*(RADIUS + 1), margin_top, 10, cxt)

    // 分钟
    renderDigit(margin_left + 39*(RADIUS + 1), margin_top, parseInt(minutes/10), cxt)
    renderDigit(margin_left + 54*(RADIUS + 1), margin_top, parseInt(minutes%10), cxt)

    renderDigit(margin_left + 69*(RADIUS + 1), margin_top, 10, cxt)

    // 秒数
    renderDigit(margin_left + 78*(RADIUS + 1), margin_top, parseInt(seconds/10), cxt)
    renderDigit(margin_left + 93*(RADIUS + 1), margin_top, parseInt(seconds%10), cxt)
}

function renderDigit (x, y, num, cxt) {

    cxt.fillStyle = 'rgb(0, 102, 153)'
    
    for( var i=0; i < digit[num].length; i++ ){
        for( var j=0; j < digit[num][i].length; j++ ){
            if ( digit[num][i][j] == 1 ) {
                let arcCenterX = x + j * 2 * (RADIUS + 1) + (RADIUS + 1) // 圆心横坐标
                let arcCenterY = y + i * 2 * (RADIUS + 1) + (RADIUS + 1) // 圆心纵坐标
                cxt.beginPath()
                cxt.arc(arcCenterX, arcCenterY, RADIUS, 0, Math.PI*2)
                cxt.closePath()
                cxt.fill()
            }
        }
    }
}

function getShowTimeSecconds () {
    let curTime = new Date()
    let retTime = curTime.getTime() - endTime.getTime()
    retTime = Math.round(retTime/1000)

    return retTime >= 0 ? retTime : 0
}
